<template>
  <div>
    <ul
      v-for="(item,index) in musicList"
      :key="index"
    >
      <li
        :data-musicurl="item.song_url"
        class="song"
        @tap="getUrl(item)"
      > <span class="iconfont icon-erji1 erji">
        </span>
        <span class="avator">
          <span class="title">{{item.name}} </span>
          <img :src="item.img_url"></img>
        </span>
      </li>
    </ul>
    <div
      v-show="playerFlag"
      class="player-show"
    >
      <Player
        @playerFlag="fromChild"
        v-bind:songDetail="songDetail"
      />
    </div>
  </div>
</template>
<script>
import Player from "@/components/Player";
import store from "../../utils/store";

export default {
  onShareAppMessage(options) {
    return {
      title: "مارس ناخشا كۇلۇبى",
      path: `/pages/index/main`,
      success: res => {},
      fail: () => {},
      complete: () => {}
    };
  },
  data() {
    return {
      musicList: {},
      playerFlag: false,
      pageIndex: 0,
      isAsk: true,
      songDetail: {}
    };
  },
  onLoad() {
    wx.setNavigationBarTitle({ title: "مۇزىكا" });

    this.$http
      .get(
        "https://wx.15v3a.cn/weapp/musicList?lang=cs&pageIndex=" +
          this.pageIndex
      )
      .then(res => {
        this.musicList = res.list;
      });
  },
  methods: {
    getUrl(song) {
      store.commit("playMusic", song);
      this.songDetail = song;
      this.playerFlag = true;
      /* wx.playBackgroundAudio({
        dataUrl: song.song_url,
        title: song.name,
        //图片地址地址
        coverImgUrl: song.img_url
      }); */
      this.$http
        .get(`https://wx.15v3a.cn/weapp/Counter?id=${song.id}`)
        .then(res => {
          // console.log(res);
        });
      // this.$http.post(name)
    },
    fromChild(data) {
      this.playerFlag = data;
    }
  },
  onReachBottom() {
    wx.showLoading({
      mask: true, //显示透明蒙层，防止触摸穿透,
      success: res => {}
    });
    if (this.isAsk) {
      this.pageIndex += 1;
      this.$http
        .get(
          "https://wx.15v3a.cn/weapp/musicList?lang=cs&pageIndex=" +
            this.pageIndex
        )
        .then(res => {
          wx.hideLoading();
          if (res.list.length < 20 && this.pageIndex > 0) {
            this.musicList = this.musicList.concat(res.list);
            this.isAsk = false;
          } else {
            this.musicList = this.musicList.concat(res.list);
          }
        });
    }
    wx.hideLoading();
  },
  components: {
    Player
  }
};
</script>
<style lang="scss">
@import url("../../../lib/style/iconfont.css");

.song {
  margin-top: 20rpx;
  width: 100%;
  height: 60rpx;
  // border: 1px solid slateblue;
  .erji {
    float: left;
    font-size: 40rpx;
    line-height: 60rpx;
    color: #999999;
    margin-left: 20rpx;
  }
  .avator {
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    .title {
      font-size: 30rpx;
      color: #929292;
      margin-right: 20rpx;
    }
  }
}
</style>
